<template>
	 <view class="content" :style="{paddingTop:(44+statusHeight)+'px'}">
	 		<view class="top-bg"></view>
	 		<view class="home">
				<!-- 顶部导航栏 -->
	 			<view class="header flex-between" :style="{paddingTop:statusHeight + 'px',background:header_bg}">
					<navigator url="/pages/index/searchGoods" class="input flex-center" hover-class="none">
						搜索菜品名称
					</navigator>
	 				
	 				<navigator url="/pages/user/message" hover-class="none" class="right">
	 					<view class="iconfont iconxiaoxi" :style="{color:icon_color}"></view>
	 					<view class="dot"></view>
	 				</navigator>
	 			</view>
				
	 			<view class="home-content">
	 				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true" indicator-active-color="#09BB07">
	 					<swiper-item v-for="(item,index) in 3" :key="'a1'+index">
	 						<view class="swiper-item">
	 							<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3025108658,1057777840&fm=26&gp=0.jpg"></image>
	 						</view>
	 					</swiper-item>
	 				</swiper>
					<view class="menus-box flex">
						<view class="menus-item" v-for="(item,index) in 10" :key="'a2'+index">
							<image src="/static/imgs/menus1.jpg" mode="widthFix"></image>
							<view>蔬菜</view>
						</view>
					</view>
					
	 				<view class="flex-between card-box">
	 					<view class="card-item">
	 						<image src="/static/imgs/a1.jpg" mode="aspectFill"></image>
	 					</view>
	 					<view class="card-item">
	 						<image src="/static/imgs/a2.jpg" mode="aspectFill"></image>
	 					</view>
	 					<view class="card-item">
	 						<image src="/static/imgs/a3.jpg" mode="aspectFill"></image>
	 					</view>
	 					<view class="card-item">
	 						<image src="/static/imgs/a4.jpg" mode="aspectFill"></image>
	 					</view>
	 				</view>
					<view class="tabs-box">
						<view class="tabs">
							<view class="tab-item" :class="{active:tabIndex == index}" @click="changeTab(index)" v-for="(item,index) in 8" :key="'a3'+index">
								<view class="h3">人气推荐</view>
								<view class="p flex-center">大家爱买</view>
							</view>
						</view>
					</view>
	 				<view class="good-card flex-between">
	 					<navigator url="/pages/index/goodDetail" hover-class="none" class="card-item" v-for="(item,index) in 10" :key="'a5'+index">
	 						<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
	 						<view class="card-bottom">
	 							<view class="title">蔬菜名字蔬菜名字</view>
	 							<view class="flex-between">
	 								<view class="price">￥15.5<text>/斤</text></view>
	 								<view class="iconfont iconAddwithcircleF"></view>
	 							</view>
	 						</view>
	 					</navigator>
	 				</view>
	 			</view>
	 		</view>
			<car />
	 	</view>
	 
</template>

<script>
	import Car from "@/components/car.vue"
	export default {
		components:{
			Car
		},
		data() {
			return {
				statusHeight:0,//状态栏高度
				tabIndex:0,
				header_bg:'rgba(255,255,255,0)',
				icon_color:'rgb(255,255,255)',
				isFixed:false
			}
		},
		onLoad() {
			this.setStatusHeight()
		},
		methods: {
			// 获取状态栏高度
			setStatusHeight(){
				if(uni.getStorageSync('statusHeight')){
					this.statusHeight = uni.getStorageSync('statusHeight')
				
				}else{
					this.$common.getBarStatusHeight().then(res=>{
						console.log(res)
						this.statusHeight = res.statusBarHeight
					})
				}
			},
			changeTab(index){
				this.tabIndex = index;
			}
		},
		onPageScroll(e){
			if(e.scrollTop < 100){
				this.header_bg = 'rgba(255,255,255,'+ e.scrollTop /100 +')'
				let num = parseInt(300 - 255 *( e.scrollTop /100))
				this.icon_color = `rgb(${num},${num},${num})`
			}else{
				this.header_bg = 'rgba(255,255,255,1)'
				this.icon_color = `rgb(45,45,45)`
			}
		}
	}
</script>

<style lang="less">
	.content {
		position: relative;
		.top-bg{
			position: absolute;
			top:0;
			width: 100vw;
			height:600rpx;
			background: #09BB07;
			border-radius: 0 0 30rpx 30rpx;
		}
	}
	.home{
		position: relative;
		z-index: 1;
		.header{
			position: fixed;
			top:0;
			z-index: 1;
			width: calc(100vw - 40rpx);
			padding: 0 20rpx;
			font-size: 30rpx;
			color:white;
			height: 44px;
			// background: red;
			.input{
				width: 600rpx;
				height: 60rpx;
				border-radius: 30rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color:#999;
				background: #eee;
				
			}
			.right{
				position: relative;
				.dot{
					position: absolute;
					right:0;
					top:0;
					width: 20rpx;
					height:20rpx;
					border-radius: 50%;
					background: red;
				}
			}
			.iconxiaoxi{
				font-size: 50rpx;
			}
		}
		
		.home-content{
			.swiper-item{
				border-radius: 10rpx;
				height:100%;
				overflow: hidden;
				padding: 0 20rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}
			.menus-box{
				flex-wrap: wrap;
				border-radius: 20rpx;
				background: white;
				margin: 20rpx auto 0;
				padding-top: 30rpx;
				width: calc(100% - 40rpx);
				
				.menus-item{
					width: 20%;
					text-align: center;
					padding-bottom: 30rpx;
					image{
						width: 80%;
						height: auto;
						border-radius: 40rpx;
					}
					view{
						font-size: 24rpx;
						color:#222;
						margin-top: 10rpx;
					}
				}
			}
			
			.card-box{
				margin: 20rpx auto 0;
				width: calc(100% - 40rpx);
				.card-item{
					width: 24%;
					height:220rpx;
					background: #039702;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.tabs-box{
				height: 117rpx;
				.tabs{
					overflow-x:scroll ;
					white-space: nowrap;
					background: #eee;
					z-index: 1;
					padding: 20rpx 0;
					&.fixed{
						position: fixed;
					}
					.tab-item{
						display: inline-block;
						padding: 0 30rpx;
						position: relative;
						&::after{
							content:"";
							display: inline-block;
							width: 2rpx;
							height:40rpx;
							background: #aaa;
							position: absolute;
							right:0rpx;
							top:20rpx;
						}
						.h3{
							font-size: 30rpx;
							color:#000;
						}
						.p{
							font-size: 22rpx;
							color:#999;
							height: 34rpx;
							border-radius: 17rpx;
						}
						&.active{
							.h3{
								font-weight: bold;
							}
							.p{
								background: orange;
								color:white;
								
							}
							
						}
						&:last-child{
							&::after{
								display: none;
							
							}
						}
					}
				}
				
			}
			.good-card{
				flex-wrap: wrap;
				width: calc(100% - 40rpx);
				margin: 10rpx auto;
				.card-item{
					width: 348rpx;
					background: white;
					border-radius: 10rpx;
					text-align: center;
					margin-bottom: 15rpx;
					overflow: hidden;
					image{
						width: 348rpx;
						height: 348rpx;
					}
					.card-bottom{
						padding: 10rpx 15rpx 20rpx;
						.title{
							font-size: 30rpx;
							color:#222;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
							margin-bottom: 10rpx;
							text-align: left;
							font-weight: bold;
						}
						.price{
							font-size: 32rpx;
							color:#f00;
							font-weight: bold;
							text{
								font-size: 24rpx;
								color:#666;
								font-weight: normal;
							}
						}
						.iconfont{
							font-size: 45rpx;
							color:#039702
						}
					}
				}
			}
		}
	}

</style>
